<template>
  <div>
    <h1>Recommendations</h1>
    <form @submit.prevent="createRecommendations">
      <div>
        <label for="exercisePlan">Exercise Plan:</label>
        <input type="text" v-model="exercisePlan" required />
      </div>
      <div>
        <label for="nutritionPlan">Nutrition Plan:</label>
        <input type="text" v-model="nutritionPlan" required />
      </div>
      <button type="submit">Create</button>
    </form>
    <div>
      <h2>Your Recommendations</h2>
      <ul>
        <li v-for="rec in recommendations" :key="rec.id">{{ rec.exercisePlan }} - {{ rec.nutritionPlan }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from '@/services/api';
import { mapGetters } from 'vuex';

export default {
  name: 'Recommendations',
  data() {
    return {
      exercisePlan: '',
      nutritionPlan: '',
      recommendations: [],
    };
  },
  computed: {
    ...mapGetters(['user']),
  },
  methods: {
    async createRecommendations() {
      try {
        const recommendations = {
          userId: this.user.id,
          date: new Date().toISOString().split('T')[0],
          exercisePlan: this.exercisePlan,
          nutritionPlan: this.nutritionPlan,
        };
        await api.createRecommendations(recommendations);
        this.fetchRecommendations();
      } catch (error) {
        console.error('Error creating recommendations:', error);
      }
    },
    async fetchRecommendations() {
      try {
        const response = await api.getRecommendations(this.user.id, new Date().toISOString().split('T')[0]);
        this.recommendations = [response.data];
      } catch (error) {
        console.error('Error fetching recommendations:', error);
      }
    },
  },
  created() {
    this.fetchRecommendations();
  },
};
</script>
